<template>
    <CommonDialog :visible="visible" width="840px" @on-close="cancel" :title="formData.title || formData?.materialVO?.materialName">
        <template v-if="formData?.materialVO"> 
            <MaterialResPlayer v-if="formData?.materialVO"
                :material="formData?.materialVO"
                :downloadable="false"
                :video-options="{ autoplay: false, controlBar: {pictureInPictureToggle: false}}"
                class="tpkcw-res"
            />
        </template>
         <div class="dialog-footer">
            <el-button class="srt-el-button srt-el-button--primary srt-el-button-h36" @click="cancel">关闭</el-button>
        </div>
    </CommonDialog>
</template>

<script setup>
import { MaterialResPlayer } from '@yanxiu/player';
import CommonDialog from '@/components/common-dialog.vue'
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();

const route = useRoute();

const emit = defineEmits(['update:modelValue', 'update-folder']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
});


const visible = computed({
    get: () => props.modelValue,
    set: val => {
        emit('update:modelValue', val);
    }
})

const formData = ref({});

watch(() => props.modelValue, (val) => {
    if (val) {
        formData.value = props.form;
    } else {
        formData.value = {};
    }
})


function cancel () {
    emit('update:modelValue', false);
}

</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
    :deep(.material-res-player) {
        width: 100% !important;
        height: 100% !important; 
    }
    :deep(.res-player) {
        width: 100% !important;
        height: 100% !important; 
    }
    :deep(.player-wrap) {
        width: 100% !important;
        height: 100% !important; 
    }

}
</style>